<template>
  <div>
    <div :class="['card-row','flex']">
      <div class="number-item">{{ index+1 }}</div>
      <el-tooltip
        :content="tooltip"
        :hide-after="5000"
        :open-delay="1000"
        placement="top-start"
        transition="el-zoom-in-center"
      >
        <div class="single-item full-width">
          <div
            :class="['header',data.show?'on-focus':null]"
            style="cursor:pointer"
            @click="$emit('itemClick')"
          >
            <CardDescription v-waves :data="data" class="card-description" />
          </div>
        </div>
      </el-tooltip>
    </div>
    <el-collapse-transition class="single-step-item">
      <div v-if="!firstShow&&data">
        <el-collapse-transition>
          <el-card v-show="show">
            <slot
              name="content"
              :data="data"
              class="single-content"
              @requireRefresh="$emit('requireRefresh')"
            />
          </el-card>
        </el-collapse-transition>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import waves from '@/directive/waves'
export default {
  name: 'SingleStep',
  components: {
    CardDescription: () => import('./CardDescription')
  },
  directives: {
    waves
  },
  props: {
    index: { type: Number, default: null },
    data: { type: Object, default: null },
    show: { type: Boolean, default: false }
  },
  data: () => ({
    firstShow: true
  }),
  computed: {
    tooltip() {
      if (!this.data.info) return '无详情'
      return this.show ? '点击隐藏详情' : '点击查看详情'
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val && this.firstShow) this.firstShow = false
      },
      immediate: true
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '@/styles/common-list';

.flex {
  display: flex;
  transition: all ease 0.5s;
  .full-width {
    width: 100%;
  }
  .number-item {
    font-size: 1.2rem;
    width: 2.4rem;
    text-align: center;
    color: #ccc;
  }
  &:hover {
    .number-item {
      color: $--color-primary;
    }
  }
}
</style>
